<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title><%=basePath%></title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<link rel="stylesheet" type="text/css" href="<%=basePath%>css/exercise.css">
	<script type="text/javascript">
		function createXMLHttpRequest() {
					try {
						return new XMLHttpRequest();//IE7以上版本、FF等！
					} catch (e) {
						try {
							return new ActiveXObject("Msxml2.XMLHTTP");//IE6
						} catch(e) {
							return new ActiveXObject("Microsoft.XMLHTTP");//IE更早版本
						}
					}
				}
		function uncollection(exerciseId){
			var xmlHttp = createXMLHttpRequest();
					xmlHttp.open("GET", "/ExerciseProject/UserServlet?method=uncollection&exerciseId="+exerciseId, true);
					xmlHttp.send(null);
					/*
					4. 监听服务器的响应
					xmlHttp.readyState，异步对象的状态，其中4状态表示服务器已经响应成功！
					xmlHttp.status，服务器的响应码
					xmlHttp.responseText，服务器的响应体
					*/
					xmlHttp.onreadystatechange = function() {
						if(xmlHttp.readyState == 4) {//如果xmlHttp.readyState=4，说明服务器响应已经成功
							// 这里的代码在服务器响应成功时执行！
							if(xmlHttp.status == 200) {//如果服务器响应码是200时
								if(xmlHttp.responseText == 1){
									alert("取消收藏成功");
									remove(exerciseId);
								}
								else{
									
								}
							}
						}
					};
					
					
		}
		function remove(exerciseId){
			var div = document.getElementById(exerciseId);
			div.parentElement.removeChild(div);
		}
	</script>
  </head>
  
<body>
<div class="header"><a href="<c:url value='/UserServlet?method=doingExercises'/>">
<span class="span_1">我要做题</span>
</a>
<a href="<c:url value='/UserServlet?method=findWrongExerciseByUser'/>">
<span class="span_2">我的错题</span></a>
<a href="<c:url value='/UserServlet?method=findMyExercise'/>">
<span class="span_3">我的收藏</span></a>
<a href="<%=basePath%>uploadexercise.jsp">
<span class="span_4">添加题目</span></a>
</div>
<div class="big_body">
<form action="<c:url value='/UserServlet?method=checkAnswer'/>" method="post">
<br>
<c:forEach items="${exercises }" var="exercise">
<div id="${exercise.exercisesId }">
${exercise.title }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;答案:${exercise.answer }
<br>
<br>
<input type="hidden" name="${exercise.tag }Title" value="${exercise.title }">
<div class="button_1"><input type="button" onclick="uncollection('${exercise.exercisesId }')" value="取消收藏" style="width:60px; height:30px; margin-top:-20px; margin-left:1000px; font-size:14px; background:#F00; color:#FFF; border:none;"></div>
<input type="radio" name="${exercise.tag }Answer" value="A" checked>${exercise.a }
<br>
<br>
<input type="radio" name="${exercise.tag }Answer" value="B">${exercise.b }
<br>
<br>
<input type="radio" name="${exercise.tag }Answer" value="C">${exercise.c }
<br>
<br>
<input type="radio" name="${exercise.tag }Answer" value="D">${exercise.c }
<br><br>
</div>

</c:forEach>

</form> 

</div>
</body>
</html>
